<template>
    <van-dropdown-menu>
        <van-dropdown-item v-model="value0" disabled title="全部商品" :options="[]" />
        <van-dropdown-item v-model="value1" title="价格" @change="changePriceFn" :options="option1" />
        <van-dropdown-item v-model="value2" title="分类" @change="changeCategoryFn" :options="filterCategory" />
    </van-dropdown-menu>
</template>

<script setup lang='ts'>
import { ref, defineProps } from 'vue';
import type { IfilterCategoryitem } from '@/types/searchpopup';
const value0 = ref(0);
const value1 = ref('desc');//价格排序方式
const value2 = ref(0); // 分类筛选方式

// 价格排序的数组
const option1 = [
    { text: '价格由高到低', value: 'desc' },
    { text: '价格由低到高', value: 'asc' },
];
// 分类筛选的数组
// const option2 = [
//     { text: '默认排序', value: 'a' },
//     { text: '好评排序', value: 'b' },
//     { text: '销量排序', value: 'c' },
// ];
const props = defineProps<{
    filterCategory: Array<IfilterCategoryitem>
}>()

const emit = defineEmits(['changePriceFn1', 'changeCategoryFn1'])
// 点击切换价格排序方式触发的事件
const changePriceFn = () => {
    // 获取切换后的排序方式
    // console.log(value1.value);
    // 将获取后的值 以子传父的方式传递给父组件 Searchpopup.vue
    emit('changePriceFn1', value1.value)
}

// 点击类别筛选触发的事件
const changeCategoryFn = () => {
    // 获取类别筛选选中的类别
    // console.log(value2.value);
    // 将获取后的值 以子传父的方式传递给父组件 Searchpopup.vue
    emit('changeCategoryFn1', value2.value)
    console.log(value2.value);
}


</script>
<style scoped></style>